<template>
  <div v-if="results.length > 0" class="page">
    <div class="mt-5" v-for="result in results">
      <div class="card w-full bg-base-100 text-black shadow-xl">
        <div class="card-body">
          <h2 class="card-title whitespace-pre-line">
            {{ result.question.questionTitle }}
          </h2>
          <div class="text-[15px] text-left font-bold text-green-500">
            答案：{{
              result.question.type === "SELECT"
                ? String.fromCharCode(65 + parseInt(result.question.answerKey))
                : result.question.answerKey === "0"
                ? "错"
                : "对"
            }}
          </div>
          <div class="text-[15px] text-left text-gray-500">
            答题分布（总计{{ result.answers.length || 0 }}人）
          </div>
          <div class="text-left">
            <div
              class="flex items-center"
              v-for="item in Object.keys(result.question.options)"
            >
              <div
                class="mr-4 font-bold max-w-[50%] min-w-[300px]"
                :class="
                  result.question.answerKey === item ? 'text-green-500' : ''
                "
              >
                {{
                  result.question.type === "SELECT"
                    ? `${String.fromCharCode(65 + parseInt(item))}. ${
                        result.question.options[item]
                      }`
                    : item === "0"
                    ? "错"
                    : "对"
                }}
              </div>
              <a-progress
                class="w-[200px]"
                :percent="
                  Math.round(
                    (result.results[item]?.length / result.answers.length) * 100
                  ) / 100 || 0
                "
              />
              <div class="ml-4 text-xs text-gray-500">（{{(result.results[item]?.length ||0)}}人）</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { result } from "@/apis/answer";

const results = ref([]);

const getResults = async () => {
  const res = await result();
  results.value = res.data;
};

onMounted(() => {
  getResults();
});
</script>

<style lang="scss" scoped></style>
